import { View, Image } from '@tarojs/components'
import styles from './index.module.scss'

import iconList from '@/static/icons/view-list.svg'
import imgRehabProgress from '@/static/fake/rehab-progress.svg'

export default function Index() {
    return (
        <View>
            <View className={styles.title}>
                <View className={styles.titleIconLeft}>
                    <Image className='icon' src={iconList} />
                </View>
                <View className={styles.titleText}>恢复进程</View>
            </View>
            {/* 进度条 */}
            <View className={styles.graph}>
                <View className={styles.graphItem}>
                    <View className={styles.graphItemTitle}>康复初期</View>
                    <View className={styles.progress} style='--p: 20%;'>
                        <View className={styles.progressBar}></View>
                    </View>
                </View>
                <View className={styles.graphItem}>
                    <View className={styles.graphItemTitle}>康复中期</View>
                    <View className={styles.progress}>
                        <View className={styles.progressBar}></View>
                    </View>
                </View>
                <View className={styles.graphItem}>
                    <View className={styles.graphItemTitle}>康复后期</View>
                    <View className={styles.progress}>
                        <View className={styles.progressBar}></View>
                    </View>
                </View>
            </View>
            {/* 图片 */}
            <View>
                <Image
                    src={imgRehabProgress}
                    mode='widthFix'
                    style={{ width: '100%' }}
                />
            </View>
        </View>
    )
}
